<template>
  <div class="layout-main">
    <div class="header">
      <div class="left">
        中后台管理
      </div>
      <div class="right">
        <div class="user">
          <el-dropdown>
            <span class="el-dropdown-link">
              {{ userStore.info.username }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <router-link to="/my/info">
                  <el-dropdown-item>基本资料</el-dropdown-item>
                </router-link>
                <router-link to="/my/avatar">
                  <el-dropdown-item>更换头像</el-dropdown-item>
                </router-link>
                <router-link to="/my/secret">
                  <el-dropdown-item>重置密码</el-dropdown-item>
                </router-link>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <el-button type="primary" size="default" @click="logout">退出</el-button>
      </div>
    </div>
    <div class="content">
      <div class="sidebar">
        <el-menu default-active="2" class="el-menu-vertical-demo">
          <router-link to="/home">
            <el-menu-item index="0">
              <el-icon>
                <Setting />
              </el-icon>
              <span>首页</span>
            </el-menu-item>
          </router-link>
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Document />
              </el-icon>
              <span>文章管理</span>
            </template>
            <template v-for="item in article">
              <router-link :to="item.path">
                <el-menu-item :index="item.path">
                  {{ item.name }}
                </el-menu-item>
              </router-link>
            </template>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <User />
              </el-icon>
              <span>个人中心</span>
            </template>
            <template v-for="item in myCenter">
              <router-link :to="item.path">
                <el-menu-item :index="item.path">
                  {{ item.name }}
                </el-menu-item>
              </router-link>
            </template>
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="main-page">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { removeToken } from '@/utils/auth.js'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/index.js'

const userStore = useUserStore()//得到的state是reactive
const router = useRouter()

function logout() {
  removeToken()
  router.push('/login')
}
const article = ref([
  { name: '文章类别', path: '/article/sort' },
  { name: '文章列表', path: '/article/list' },
  { name: '发布文章', path: '/article/publish' }])
const myCenter = ref([
  { name: '基本资料', path: '/my/info' },
  { name: '更换头像', path: '/my/avatar' },
  { name: '重置密码', path: '/my/secret' }])
</script>
<style lang="scss" scoped>
.layout-main {
  height: 100vh;
  $headerH: 50px;

  .header {
    height: $headerH;
    background-color: rgb(183, 232, 255);
    display: flex;
    align-items: center;
    padding: 0 40px;
    justify-content: space-between;

    .left {
      font-size: 20px;
      font-weight: bold;
    }

    .right {
      display: flex;
      align-items: center;

      .user {
        margin-right: 15px;
        line-height: 1;

        .el-dropdown-link {
          cursor: pointer;
          color: var(--el-color-primary);
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .content {
    display: flex;
    height: calc(100% - $headerH);

    .sidebar {
      width: 180px;
      height: 100%;
      border-right: 1px solid #acafaf;
    }

    .main-page {
      flex: 1 0 0;
    }
  }
}
</style>